import React, { useEffect } from "react"
import '../style/article.list.css'
import { graphql, Link } from "gatsby"


export default function List({data}) {
  return (
    <div className="home-page">
      <Lists articles={data.allArticleMockData.nodes} />
    </div>
  )
}

function Lists({ articles }) {
  return articles.map(article => (
    <div className="article-preview" key={article.id}>
      <Link to={`/articleDetail/${article.id}`}>
      {article.title}
      </Link>
  
    </div>
  ))
}
export const pageQuery = graphql`
  query {
    allArticleMockData {
      nodes {
        id
        title
      }
    }
  }
`
